<template>
  <view class="calendar-container">
    <scroll-view scroll-y class="event-list-container">
      <view class="event-list">
        <view class="event-item" v-for="event in events" :key="event.id" @click="goToEventDetail(event.id)">
          <view class="event-date">
            <text class="event-day">{{ formatDay(event.eventDate) }}</text>
            <text class="event-month">{{ formatMonth(event.eventDate) }}</text>
          </view>
          <view class="event-details">
            <text class="event-title">{{ event.title }}</text>
            <text class="event-time">{{ formatTime(event.eventDate) }}</text>
            <text class="event-type">{{ getEventTypeText(event.eventType) }}</text>
          </view>
          <view class="event-actions" v-if="event.reminderMinutes">
            <text class="reminder-icon">●</text>
          </view>
        </view>
        
        <view class="empty-state" v-if="events.length === 0">
          <image class="empty-icon" src="/static/日历.png" mode="aspectFit"></image>
          <text class="empty-text">暂无即将到来的事件</text>
          <button class="create-first-btn" @click="goToCreateEvent">创建第一个事件</button>
        </view>
      </view>
    </scroll-view>

    <!-- FAB to add new event -->
    <view class="add-fab" @click="goToCreateEvent">
      <text class="fab-icon">+</text>
    </view>
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'CalendarPage',
  computed: {
    ...mapState('calendar', ['events']),
  },
  onShow() {
    // 每次显示页面时刷新数据
    this.fetchUpcomingEvents();
  },
  methods: {
    ...mapActions('calendar', ['fetchUpcomingEvents']),
    
    goToCreateEvent() {
      uni.navigateTo({
        url: '/pages/calendar/add-event'
      });
    },

    goToEventDetail(eventId) {
      uni.navigateTo({
        url: `/pages/calendar/event-detail?id=${eventId}`
      });
    },

    formatDay(dateStr) {
      if (!dateStr) return '';
      const date = new Date(dateStr);
      return date.getDate().toString().padStart(2, '0');
    },

    formatMonth(dateStr) {
      if (!dateStr) return '';
      const date = new Date(dateStr);
      const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
      return months[date.getMonth()];
    },

    formatTime(dateStr) {
      if (!dateStr) return '';
      const date = new Date(dateStr);
      return date.toLocaleTimeString('zh-CN', { 
        hour: '2-digit', 
        minute: '2-digit',
        hour12: false 
      });
    },

    getEventTypeText(type) {
      const typeMap = {
        birthday: '生日',
        anniversary: '纪念日',
        holiday: '节日',
        meeting: '聚会',
        appointment: '约会',
        work: '工作',
        other: '其他'
      };
      return typeMap[type] || '其他';
    }
  }
};
</script>

<style lang="scss" scoped>
.calendar-container {
  height: 100vh;
  background-color: #fafafa;
  position: relative;
}

.event-list-container {
  height: 100%;
  padding: 16rpx;
}

.event-list {
  padding-bottom: 100rpx;
}

.event-item {
  background: white;
  margin-bottom: 12rpx;
  border-radius: 12rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  border: 1px solid #f0f0f0;
  
  &:active {
    background: #f8f9fa;
  }
}

.event-date {
  width: 80rpx;
  text-align: center;
  margin-right: 16rpx;
  padding: 12rpx;
  background: #e74c3c;
  border-radius: 8rpx;
  color: white;
}

.event-day {
  font-size: 28rpx;
  font-weight: 600;
  display: block;
  line-height: 1;
}

.event-month {
  font-size: 20rpx;
  display: block;
  margin-top: 2rpx;
  opacity: 0.9;
}

.event-details {
  flex: 1;
}

.event-title {
  font-size: 26rpx;
  font-weight: 500;
  color: #2c3e50;
  display: block;
  margin-bottom: 6rpx;
}

.event-time {
  font-size: 22rpx;
  color: #7f8c8d;
  display: block;
  margin-bottom: 4rpx;
}

.event-type {
  font-size: 20rpx;
  color: #95a5a6;
  background: #f8f9fa;
  padding: 2rpx 8rpx;
  border-radius: 4rpx;
  display: inline-block;
}

.event-actions {
  display: flex;
  align-items: center;
}

.reminder-icon {
  font-size: 24rpx;
  color: #f39c12;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 32rpx;
  text-align: center;
}

.empty-icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 24rpx;
  opacity: 0.4;
}

.empty-text {
  font-size: 24rpx;
  color: #95a5a6;
  margin-bottom: 32rpx;
}

.create-first-btn {
  background: #34495e;
  color: white;
  padding: 12rpx 24rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  border: none;
}

.add-fab {
  position: fixed;
  bottom: 100rpx;
  right: 32rpx;
  width: 88rpx;
  height: 88rpx;
  background: #34495e;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  
  &:active {
    transform: scale(0.95);
  }
}

.fab-icon {
  font-size: 36rpx;
  color: white;
  font-weight: 300;
}
</style> 